<template>
  <div id="app">
   
      <el-row>
         <!-- 最顶部的欢迎信息和登录注册按钮-->
         <el-col :span="12" >
           <span style="color: red;float: left; margin-left: 30px;font-size: 18px;">你好！欢迎来到全程旅游网！</span>

           <el-button round size="mini"
           style="float: left; color: dodgerblue; background-color: #D3DCE6;"
           @click="login">个人登录</el-button>

           <el-button round size="mini"
           style="float: left; color:dodgerblue; background-color: #D3DCE6;"
           @click="register">个人免费注册</el-button>
         </el-col>

         <el-col :span="12" >
            <el-button type="text" icon="el-icon-mobile-phone" size="mini" style="float: right; margin-right: 50px;">手机版</el-button>
            <el-button type="text" icon="el-icon-s-custom" size="mini" style="float: right; margin-right: 20px;">管理我的网站</el-button>
            <el-button type="text" icon="el-icon-office-building" size="mini" style="float: right; margin-right: 5px;">开店</el-button>
         </el-col>
      </el-row>


      <!-- 顶部搜索框和图片信息-->
      <el-row >
        <!-- 图片-->
        <el-col :span="5">
            <el-image
                  style="width: 100px; height: 65px;  float: left; margin-left: 20px;"
                  :src="url"
                  fit="contain">
              </el-image>
        </el-col>
          <!-- 搜索框-->
        <el-col :span="10" style="float: right; margin-top: 15px; margin-right: 20px;">
            <el-input placeholder="请输入关键字搜索" v-model="content"  clearable >
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="周边游" value="1"></el-option>
                    <el-option label="国内游" value="2"></el-option>
                    <el-option label="出境游" value="3"></el-option>
                    <el-option label="门票" value="4"></el-option>
                    <el-option label="酒店" value="5"></el-option>
                  </el-select>
              <el-button slot="append"  icon="el-icon-search" style="background-color: deepskyblue; color:white;">查询</el-button>
            </el-input>
        </el-col>
      </el-row>



      <!-- 导航菜单-->
      <el-container>
        <el-header>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/homepage">首页</el-menu-item>
          <el-menu-item index="/scenery">周边游</el-menu-item>
          <el-menu-item index="/domestic">国内游</el-menu-item>
          <el-menu-item index="/foreign">出境游</el-menu-item>
          <el-menu-item index="5">旅行社</el-menu-item>
          <el-menu-item index="6">门票</el-menu-item>
          <el-menu-item index="/hotel">酒店</el-menu-item>
          <el-menu-item index="8">目的地</el-menu-item>
          <el-menu-item index="9"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
       return {
         activeIndex:'/homepage',
         activeIndex:'/scenery',
         activeIndex:'/domestic',
         activeIndex:'/foreign',
         activeIndex: '/hotel',
        
         url:'https://i.postimg.cc/J7KjNt96/title.png',
         content:'',
         select:'',
       };
     },
     methods: {
       handleSelect(key, keyPath) {
         console.log(key, keyPath);
         this.$router.push(key);
       },
       login() {
          console.log("用户跳转至登录页面");
          this.$router.push({path:"/loginUser"});

       },
       register() {
          console.log("用户跳转至注册页面");
          this.$router.push({path:"/register"});

       }

     }
}
</script>

<style>
#app {
  width: 1080px;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
